<template>
  <div>
    <div class="filter-container" style="margin-bottom: 10px">
      <el-button @click="add" type="primary" icon="el-icon-plus">添加</el-button>
    </div>
    <el-table :data="list" style="width: 99%" border="true" stripe="true"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}" max-height="800px">
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column width="400" align="center" label="图片">
        <template slot-scope="x">
          <el-image :src="x.row.img" fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="对应服务" prop="servicename">
      </el-table-column>
      <el-table-column align="center" label="服务id" width="100" prop="s_id">
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.$index, scope.row)" icon="el-icon-edit" size="small">编辑
          </el-button>
          <el-button type="danger" @click="del(scope.$index, scope.row)" icon="el-icon-delete" size="small">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <addbanner ref="add" @then="cll"></addbanner>
    <updatebanner ref="updata" @then="cll"></updatebanner>
  </div>
</template>

<script>
  import {
    getallservice
  } from "@/api/service/service";
  import {
    get,
    del
  } from "@/api/sub/banner";
  import addbanner from "@/components/sub/addbanner.vue";
  import updatebanner from "@/components/sub/updatebanner.vue";
  export default {
    components: {
      addbanner,
      updatebanner,
    },
    data() {
      return {
        list: [],
        service: [],
      };
    },
    async created() {
      this.requestservice();
    },
    methods: {
      del(index, row) {
        let that = this;
        this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            del({
              field: "id",
              op: "=",
              value: row.id,
            }).then(() => {
              that.$message({
                type: "success",
                message: "删除成功!",
              });
              that.getlist();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      edit(index, row) {
        this.$refs.updata.add(row);
      },
      cll() {
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        this.getlist();
      },
      add() {
        this.$refs.add.add();
      },
      getlist() {
        let that = this;
        get({
          field: "id",
          op: ">",
          value: "0",
        }).then((res) => {
          that.list = res;
          that.list.forEach((val) => {
            that.$set(val, "servicename", that.getservicename(val.s_id));
            console.log(that.getservicename(val.s_id), val.s_id)
          });
        });
      },
      getservicename(id) {
        var that = this,
          name = "";
        that.service.forEach((val) => {
          if (val.s_id == id) {
            name = val.name;
          }
        });
        return name;
      },
      requestservice() {
        var that = this;
        var data = {
          field: "s_id",
          op: ">",
          value: 0,
          order_by: "cTime",
        };
        getallservice(data).then((res) => {
          that.service = res;
          that.getlist();
        });
      },
    },
  };
</script>
